'use client'

import React from 'react'
import { ThemeProvider as NextThemeProvider, type ThemeProviderProps } from 'next-themes'
import Header from '@/components/layout/header'
import { cn } from '@/lib/utils'

interface ExtendedThemeProviderProps extends ThemeProviderProps {
    containerClassName?: string
}

export default function ThemeProvider({
    children,
    containerClassName,
    ...props
}: ExtendedThemeProviderProps) {
    return (
        <NextThemeProvider {...props}>
            <Header />
            <main className={cn('container mx-auto px-4', containerClassName)}>
                {children}
            </main>
        </NextThemeProvider>
    )
}
